<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    id: 1,
    img: "https://picsum.photos/200/300",
    position: "首页轮播图",
    link: "https://www.baidu.com",
    sort: 50,
  },
  {
    id: 2,
    img: "https://picsum.photos/200/300",
    position: "首页轮播图",
    link: "https://www.baidu.com",
    sort: 50,
  },
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
  if (action === "add") {
    modalVisible.value = true;
  }
};
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" height="100%" padding="16px">
    <umrp-breadcrumb :items="['广告管理', '广告列表']"></umrp-breadcrumb>
    <umrp-card :border="false">
      <umrp-table :action-bar="true" :data="dataList" @action="handleAction">
        <template #columns>
          <umrp-table-column title="编号" data-index="id"></umrp-table-column>
          <umrp-table-column data-index="img" slot-name="img" title="广告图片"></umrp-table-column>
          <umrp-table-column data-index="position" title="广告位置"></umrp-table-column>
          <umrp-table-column data-index="link" title="广告链接"></umrp-table-column>
          <umrp-table-column data-index="sort" title="广告排序"></umrp-table-column>
          <umrp-table-column slot-name="action" title="操作" :width="160"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button @click="modalVisible = true" type="primary">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">删除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #img>
          <umrp-image :height="80" :width="80"></umrp-image>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
  <umrp-modal v-model:visible="modalVisible" width="500px">
    <umrp-container padding="16px 0">
      <umrp-form>
        <umrp-form-item label="广告位置">
          <umrp-select>
            <umrp-option>123123</umrp-option>
          </umrp-select>
        </umrp-form-item>
        <umrp-form-item label="广告图片">
          <umrp-upload></umrp-upload>
        </umrp-form-item>
        <umrp-form-item label="广告链接">
          <umrp-input></umrp-input>
        </umrp-form-item>
        <umrp-form-item label="广告排序">
          <umrp-input-number :default-value="50"></umrp-input-number>
        </umrp-form-item>
      </umrp-form>
    </umrp-container>
  </umrp-modal>
</template>
